/** IT温湿度面板部件 
 * Author:      yangjq 
 * CreateTime:  2023/8/14 12:19:45 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:35:38 
 * Description: 
*/ 
<template>
  <div ref="echartRef" :style="{width:props.width , height:props.height}" ></div>
</template>
<script setup lang="ts">
import { ref  , Ref , reactive , watchEffect,onMounted,watch} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import {defHttp} from "/@/utils/http/axios";

const props = defineProps({
  width: { type: String,default:'100%'},
  height: { type: String,default:'100%'},
  roomIndex: { type: Number, default: 0 }
});
const ROOM_NAMES = ['数据<br/>机房','网络<br/>机房','UPS<br/>间'];

const echartRef = ref<HTMLDivElement | null>(null);

const { setOptions, echarts,getInstance: chartInstance} = useECharts(echartRef as Ref<HTMLDivElement>,'dark');

  // prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

const data2 = [["2000-06-05", 126], ["2000-06-06", 123], ["2000-06-07", 145], ["2000-06-08", 286], ["2000-06-09", 173], ["2000-06-10", 535], ["2000-06-11", 273], ["2000-06-12", 268], ["2000-06-13", 192], ["2000-06-14", 230], ["2000-06-15", 245], ["2000-06-16", 239], ["2000-06-17", 315], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 237], ["2000-06-22", 118], ["2000-06-23", 185], ["2000-06-24", 194], ["2000-06-25", 171], ["2000-06-26", 126], ["2000-06-27", 184], ["2000-06-28", 193], ["2000-06-29", 185], ["2000-06-30", 173], ["2000-07-01", 183], ["2000-07-02", 135], ["2000-07-03", 117], ["2000-07-04", 182], ["2000-07-05", 144], ["2000-07-06", 172], ["2000-07-07", 126], ["2000-07-08", 67], ["2000-07-09", 166], ["2000-07-10", 191], ["2000-07-11", 192], ["2000-07-12", 123], ["2000-07-13", 37], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 164], ["2000-07-17", 169], ["2000-07-18", 188], ["2000-07-19", 717], ["2000-07-20", 183], ["2000-07-21", 221], ["2000-07-22", 127], ["2000-07-23", 155], ["2000-07-24", 160]];
const dateList = ref(data.map(function (item) {
  return item[0];
}));

//温度--数据机房
const temList = ref(data2.map(function (item) {
  return (30-Math.random()*10).toFixed(2);
}));

// //温度--网络机房
// const valueList4 = data2.map(function (item) {
//   return (30-Math.random()*10).toFixed(2);
// });


//湿度--数据机房
const humList = ref(data2.map(function (item) {
  return Math.round(70-Math.random()*20);
}));

// //湿度--网络机房
// const valueList6 = data2.map(function (item) {
//   return Math.round(76-Math.random()*20);
// });
const option = reactive({});
function initCharts() {
  Object.assign(option,reactive({
    title: [
      {
        top: 0,
        left: 'center',
        text: '温湿度'
      }
    ],
    tooltip: {
      trigger: 'axis'
    },
    //backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 10;
    },
    xAxis: [
      {
        data: dateList,
        gridIndex: 0,
        boundaryGap:true,
        axisTick: {
          alignWithLabel:true,
        },
        nameTextStyle :{
          fontWeight: 700,
          fontSize: 12,
          color: '#ffffff'
        },
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:'温度(℃)',
        nameLocation:'center',
        nameGap: 30,
        nameRotate: 90,
        nameTextStyle :{
          fontWeight: 700,
          fontSize: 12,
          color: '#ffffff'
        },
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
        },
        splitLine:{show: false},
        splitArea: {
          show: true,
          areaStyle: {
            color:['rgba(250,250,250,0)','rgba(200,200,200,0.1)'],
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          }
        },
        gridIndex: 0
      },
      {
        type: 'value',
        name:'湿度(%)',
        nameLocation:'center',
        nameGap: 30,
        nameRotate: 90,
        nameTextStyle :{
          fontWeight: 700,
          fontSize: 12,
          color: '#ffffff'
        },
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
        },
        splitLine:{show: false},
        gridIndex: 0
      },
    ],
    grid: { top: 'center', left: 'center',width:'82%', height: '60%',containLabel:true },
    legend: {
      show:true,
      type:'plain',
      bottom:0,
      textStyle: {
        fontWeight: 700,
        fontSize: 12,
        color: '#ffffff'
      },
      data: ['温度', '湿度']
    },
    series: [
      {
        type: 'line',
        name: '温度',
        showSymbol: false,
        data: temList,
        xAxisIndex: 0,
        yAxisIndex: 0,
      },
      {
        type: 'line',
        name: '湿度',
        showSymbol: false,
        data: humList,
        xAxisIndex: 0,
        yAxisIndex: 1,
      },
    ]
  }));
  setOptions(option);
}

function loadData(){
  let api = "/screen/it/temList";
  let params = {
    name: ROOM_NAMES[props.roomIndex].replaceAll("<br/>", "")
  };
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        console.log(res.result);
        console.log(params.name);
        dateList.value = res.result.dateList;
        humList.value = res.result.hum;
        temList.value = res.result.tem;
        initCharts();
      } else {
        console.log('接口错误用默认');
      }
    })
}
watchEffect(() => {
  props && loadData();
});
onMounted(() => {
  initCharts();
});

</script>
<style>
</style>
